<template>
  <div class="test-chart-container">
    <h1>ECharts 测试页面</h1>
    <div class="chart-box">
      <div ref="chartContainer" style="width: 600px; height: 400px; border: 1px solid #ccc;"></div>
      <button @click="initChart" class="init-button">初始化图表</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartContainer = ref(null)
let chartInstance = null

const initChart = () => {
  console.log('开始初始化测试图表...')
  console.log('DOM元素:', chartContainer.value)
  
  // 先清除实例如果存在
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  
  if (chartContainer.value) {
    try {
      // 设置容器样式
      const container = chartContainer.value
      container.style.width = '600px'
      container.style.height = '400px'
      container.style.backgroundColor = '#f0f0f0'
      
      console.log('容器尺寸:', container.offsetWidth, container.offsetHeight)
      
      // 初始化图表
      chartInstance = echarts.init(container)
      console.log('图表实例创建成功:', chartInstance)
      
      // 简单的配置
      const option = {
        title: {
          text: '测试图表'
        },
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10]
        }]
      }
      
      // 设置配置
      chartInstance.setOption(option)
      console.log('图表配置已设置')
      
      alert('测试图表初始化成功')
    } catch (error) {
      console.error('初始化测试图表出错:', error)
      alert('初始化测试图表出错: ' + error.message)
    }
  } else {
    console.error('图表DOM元素不存在')
    alert('图表DOM元素不存在')
  }
}

onMounted(() => {
  console.log('组件挂载完成')
  console.log('ECharts可用:', !!echarts)
  console.log('DOM元素:', chartContainer.value)
})
</script>

<style scoped>
.test-chart-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.chart-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.init-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.init-button:hover {
  background-color: #40a9ff;
}
</style>
